<template>
    <div class="navigationListmiddle">
        <Breadcrumb></Breadcrumb>
        <div class="info">
            <div class="left navigationList" v-if="!isSearchFlag">
                <div class="title">最新资讯</div>
                <div class="navigation ellipsis" :class="navigationId == item.navigationId ? 'active' : ''"
                    @click="chooseArticleList(item)" v-for="item, index in navigationList" :key="index">
                    <span class="name">{{ item.navigationName }}</span>
                </div>
                <!-- <div class="navigation ellipsis" :class="navigationId == -1 ? 'active' : ''"
                    @click="chooseArticleListAll()">
                    <span class="name">查看全部</span>
                </div> -->
            </div>
            <div class="right articleList" :class="isSearchFlag ? 'w100p' : ''" v-loading="loading">
                <div class="title label">文章列表</div>
                <div class="article" @click="jumpPage(item)" v-for="item, index in articleList" :key="index">
                    <div class="ellipsis"><i class="el-icon-document"></i><span class="title">{{ item.title
                            }}</span>
                    </div>
                    <div class="time">{{ item.publishTime }}</div>
                </div>
                <el-pagination v-show="articleList.length > 0" class="pagination" background
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
                <div class="errText" v-show="articleList.length == 0">暂无相关文章列表</div>
            </div>
        </div>
    </div>
</template>

<script>
import homepageApi from '@/api/homepage';
import Breadcrumb from "@/components-website/breadcrumb.vue" //头部
import Hander from "@/components-website/hander.vue" //头部
import article from "@/api/article";
export default {
    name: 'article',
    components: { Hander, Breadcrumb },
    data() {
        return {
            loading: false,
            content: '',
            currentPage: 1,
            pageSize: 10,
            total: 10,
            articleList: [],
            navigationId: -1,
            navigationList: [],
            searchStr: '',
            isSearchFlag: false
        }
    },
    mounted() {
        this.getquery();
        this.queryNavigation();
    },
    watch: {
        $route(to, from) {
            this.getquery();
        }
    },
    methods: {
        getquery() {
            this.navigationId = this.$route.query?.navigationId;
            this.searchStr = this.$route.query?.searchStr;
            this.isSearchFlag = this.$route.query?.isSearchFlag;
            if (this.isSearchFlag) {
                this.navigationId = ''
            }
            this.queryPageList()
        },
        jumpPage(item) {
            if (item.jumpType == 'URL' && item.url) {
                // 在当前窗口打开新链接
                window.open(item.url, '_blank');
            } else if (item.jumpType == 'ARTICLE' && item.articleId) {
                this.$router.push({
                    path: '/navigation', query: {
                        articleId: item.articleId,
                        name: '文章'
                    }
                })
            } else {
                console.log('无跳转')
            }
        },

        chooseArticleList(item) {
            this.queryByNavigationId(item.navigationId)
        },
        async queryNavigation() {
            let { data } = await homepageApi.queryNavigation();
            this.navigationList = data || [];
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.queryPageList()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.queryPageList()
        },
        queryPageList() {
            let params = {
                page: this.currentPage,
                size: this.pageSize,
                searchStr: this.searchStr || '',
                condition: {
                    navigationId: this.navigationId
                }
            }
            this.loading = true;
            //查询列表
            article.queryPageList({ ...params }).then(res => {
                this.loading = false;
                if (res.code == 0) {
                    let { list, total } = res.data;
                    this.articleList = list || [];
                    this.total = total || 0;
                    // this.$message.success(res.msg || '查询成功')
                } else {
                    // this.articleList = []
                    this.$message.warning(res.msg || '查询失败')
                }
            }).catch(err => {
                this.loading = false;
                // this.articleList = []
                this.$message.warning('查询失败')
            })
        },
        queryByNavigationId(navigationId) {
            if (!navigationId) return;
            this.navigationId = navigationId
            this.loading = true
            homepageApi.queryByNavigationId(navigationId).then(res => {
                this.loading = false
                if (res.data) {
                    this.articleList = res.data || []
                } else {
                    this.articleList = []
                }
            }).catch(err => {
                this.loading = false
            });
        },
        chooseArticleListAll() {
            this.navigationId = -1
        },
    }
}
</script>

<style lang="scss" scoped>
.ellipsis {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navigationListmiddle {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;

    .info {
        width: 100%;
        margin-bottom: 50px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        .navigationList {
            width: 300px;
            border-radius: 8px;
            border: 1px solid #f3f3f3;
            box-shadow: 0px 0px 30px 10px rgba(102, 102, 102, 0.116);

            .title {
                width: calc(100% + 10px);
                background-color: #164fa6;
                line-height: 50px;
                padding: 0 20px;
                color: #ffffff;
                font-weight: bold;
                transform: translate(-10px);
                border-radius: 0 0 0 10px;
                background: linear-gradient(to right, #5e85bf, #164fa6);
            }

            .navigation {
                width: 100%;
                line-height: 50px;
                padding: 0 20px;
                background-color: #ffffff77;
                transition: all 0.3s;

                .name {
                    width: 100%;
                    display: inline-block;
                    border-bottom: 1px solid #f1f1f1;
                }

                &:hover {
                    color: #333333;
                    background-color: #3a90f3;
                    border-radius: 0 0 8px 8px;
                    transform: translateX(-5px);
                    background: linear-gradient(to right, #316eb3af, #1f63a28b);
                    font-weight: bold;
                    color: #ffffff;

                    .name {
                        border-bottom: 1px solid #3a90f3;
                    }
                }
            }

            .active {
                border-radius: 0 0 8px 8px;
                background: linear-gradient(to right, #316eb3c0, #1f63a2b4);
                font-weight: bold;
                color: #ffffff;

                .name {
                    border-bottom: none;
                    border-bottom: 1px solid #3a90f3;
                }
            }
        }

        .articleList {
            padding: 10px 0;
            width: calc(100% - 315px);
            min-height: 630px;
            background-color: #ffffff77;
            border-radius: 8px;
            border: 1px solid #f3f3f3;

            .label {
                font-size: 16px;
                margin: 10px 30px;
            }

            .article {
                width: 100%;
                padding: 0 30px;
                border-bottom: 1px solid #f3f3f3;
                font-size: 16px;
                color: #666666;
                line-height: 50px;
                display: flex;
                justify-content: space-between;
                cursor: pointer;
                transition: all 0.3s;

                .ellipsis {
                    width: calc(100% - 150px);
                }

                .title {
                    padding: 10px;
                }

                .time {
                    font-size: 14px;
                    font-weight: 500 !important;
                }

                &:hover {
                    color: #333333;
                    background-color: #ffffff;
                    box-shadow: 0px 0px 30px 10px rgba(102, 102, 102, 0.116);
                    transform: translateY(-5px);
                }
            }

        }
    }
}

.errText {
    text-align: center;
    color: #999999;
}

.pagination {
    padding-top: 20px;
    text-align: right;
}
</style>